<div class="container-fluid" id="sxflow">
  <div class="page-header">
    <div class="pull-left">
      <h4>实训报名流程</h4>
    </div>
  </div>
  <!--标签栏-->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation"><a data-ref="view/accountManager.html">1.完善个人资料</a></li>
    <li role="presentation"><a data-ref="view/selectPractice.html">2.选择实习地点</a></li>
    <li role="presentation"><a data-ref="view/no.html">3.查看实习分配情况</a></li>
    <li role="presentation"><a data-ref="view/dailyRecord.html">4.发布实习日志</a></li>
    <li role="presentation"><a data-ref="view/score.html">5.查看实习成绩</a></li>
  </ul>
  <!--列表栏-->
  <div class="tab-content" style="margin-bottom: 100px;"></div>
</div>
<!--可以写入不显示的元素-->
<script type="text/javascript">
  /* 标签栏切换事件 */
  $('[role="presentation"] a').click(function () {
    var that = this;
    if ($(this).parent().attr('class') == "active")
      return;
    /* 标签切换时淡入淡出 */
    $.when($(".tab-content").fadeOut('fast')).then(function () {
      $('[role="presentation"]').removeAttr('class');
      $(that).parent().attr('class', 'active');
      /* 异步加载 */
      return $.ajax(that.dataset.ref + '?ts=' + Date.parse(new Date()));
    }).done(function (data) {
      $('.tab-content').empty();
      $('.tab-content').append(data);
      $('.tab-content .page-header').css('display', 'none');
      //bordersre();
    }).fail().then(function () {
      $('.tab-content').fadeIn('fast');
    });
  });
  /* 首次载入触发 */
  $('[role="presentation"] a:first').click();

</script>